<template>
	<div class="withdrawal-details table-theme">
		<head-back-title title="提现详情"></head-back-title>
		<el-card>
			<div class="user-info" v-if="show">
				<img :src="info.info.logo">
				<div class="user-info-content">
					<div class="user-info-item">
						<p>ID：</p>
						<p>{{ userId }}</p>
					</div>
					<div class="user-info-item">
						<p>昵称：</p>
						<p>{{ info.info.name }}</p>
					</div>
					<div class="user-info-item">
						<p>累计余额：</p>
						<p>{{ info.info.history_money }}</p>
					</div>
					<div class="user-info-item">
						<p>可提现余额：</p>
						<p>{{ info.info.money }}</p>
					</div>
					<div class="user-info-item">
						<p>已提现金额：</p>
						<p>{{ info.info.take_money }}</p>
					</div>
					<div class="user-info-item">
						<p>待到账金额：</p>
						<p>{{ info.info.take_wait_money }}</p>
					</div>
					<div class="user-info-item">
						<p>本周收入金额：</p>
						<p>{{ info.info.week_price }}</p>
					</div>
					<div class="user-info-item">
						<p>上周收入金额：</p>
						<p>{{ info.info.last_week }}</p>
					</div>
					<div class="user-info-item">
						<p>本月收入金额：</p>
						<p>{{ info.info.month_price }}</p>
					</div>
					<div class="user-info-item">
						<p>上月收入金额：</p>
						<p>{{ info.info.last_month }}</p>
					</div>
					
				</div>
			</div>
		</el-card>
		
		<el-card style="margin-top: 20px;">
			<p style="text-align: right;line-height: 30px;font-size: 18px;margin-bottom: 10px;">数据总数：{{ total }}</p>
			<el-table :data="tableList">
				<el-table-column label="订单ID" align="center" prop="order_id"></el-table-column>
				<el-table-column label="订单编号" align="center" prop="order_sn"></el-table-column>
				<el-table-column label="金额" align="center" prop="">
					<template slot-scope="scope">
						<el-tag type="danger">{{scope.row.money}}元</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="审核" align="center" prop="status_name"></el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="状态" align="center" prop="wait_name"></el-table-column>
				<el-table-column label="备注" align="center" prop="brief"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="查看订单" align="center">
					<template slot-scope="scope">
						<el-button v-if="scope.row.order_type == 2" type="primary" size="mini" @click="goOrderDetails(scope.row.order_id)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				info: '',
				tableList: [],
				total: 0,
				page: 0,
				type: this.$route.query.use_type,
				userId: this.$route.query.user_id,
			};
		},
		methods: {
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					use_type: this.type,
					user_id: this.userId
				}
				this.$http(this.$ApiList.WalletDetailed, data).then(res => {
					this.info = res.datas
					this.show = true
					this.tableList = res.datas.data
					this.total = res.datas.count
				});
			},
			// 查看订单详情
			goOrderDetails(id) {
				this.$router.push({
					path: '/order_details',
					query: {
						id: id
					}
				});
			},
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.withdrawal-details {
		padding: 20px 20px;
		width: 100%;

		.user-info {
			margin-bottom: 20px;
			display: flex;

			img {
				display: block;
				margin: 20px 20px 0 0;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				border: 6px solid #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			}

			.user-info-content {
				display: flex;
				flex: 1;
				flex-wrap: wrap;

				.user-info-item {
					margin: 20px 20px 0 0;
					height: 32px;
					display: flex;
					border: 1px solid #C0C0C0;
					color: #333;
					border-radius: 15px;
					background-color: #fff;
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

					p {
						&:first-child {
							padding: 0 10px;
							border-right: 1px solid #C0C0C0;
						}

						&:last-child {
							padding: 0 10px;
						}
					}

				}
			}
		}

		.user-info p {
			text-align: center;
			line-height: 30px;
			margin-bottom: 0;
		}
	}
</style>
